<template>
  <Card>
    <div class="searchBox">
      <Form
        id="searchForm"
        ref="searchForm"
        :label-width="90"
        :model="searchForm"
        class="search-form"
        inline
      >
        <Form-item label="车牌号：" prop="license_plate_num">
          <Input
            v-model="searchForm.license_plate_num"
            clearable
            placeholder="支持模糊搜索"
            style="width: 200px"
            type="text"
          />
        </Form-item>
        <Form-item style="margin-left: -90px">
          <Button
            icon="md-search"
            type="primary"
            @click="handleSearch"
          >搜索
          </Button
          >
          <Button @click="handleReset">重置</Button>
        </Form-item>
      </Form>
    </div>
    <div class="btns">
      <Button
        icon="ios-add"
        target="_self"
        type="primary"
        @click="toAdd"
      >添加
      </Button
      >
      <!-- <Button disabled icon="md-cloud-upload">导入</Button>-->
      <!-- <Button disabled icon="md-cloud-download">导出</Button> -->
      <Button icon="md-trash" type="error" @click="delAll">删除</Button>
    </div>
    <div class="table">
      <Row>
        <Alert show-icon>
          已选择
          <span class="select-count">{{ selectCount }}</span> 项
          <a class="select-clear" @click="clearSelectAll">清空</a>
        </Alert>
      </Row>
      <Row>
        <Table
          ref="table"
          :columns="columns"
          :data="data"
          :loading="loading"
          border
          size="small"
          @on-selection-change="showSelect"
        >
          <template slot="action" slot-scope="{ row }">
            <a
              class="edit"
              size="small"
              style="color: #2d8cf0; font-size: 12px"
              type="text"
              @click="toEdit(row)"
            >编辑</a
            >
            <Divider type="vertical"/>
            <a
              class="del"
              size="small"
              style="color: #ed4014; font-size: 12px"
              type="text"
              @click="remove(row)"
            >删除</a
            >
          </template>
        </Table>
      </Row>
      <Row class="page" justify="end" type="flex">
        <Page
          :current="searchForm.pageNumber"
          :page-size="searchForm.pageSize"
          :total="total"
          show-total
          @on-change="changePage"
        />
      </Row>
    </div>
    <Modal
      v-model="modal"
      :mask-closable="false"
      :styles="{ top: '20px' }"
      title="添加报废车辆信息"
      width="850"
      @on-cancel="cancel"
    >
      <Form ref="form" :label-width="160" :model="form" :rules="formValidate">
        <Row>
          <Col span="12">
          <FormItem
            v-if="model_type == 1"
            label="选择车辆"
            prop="license_plate_num"
          >
            <Input
              v-model="form.license_plate_num"
              placeholder
              readonly
            ></Input>
          </FormItem>
          </Col>
          <Col span="12">
          <FormItem v-if="model_type != 1" label="选择车辆" prop="bus_id">
            <Select v-model="form.bus_id" filterable>
              <Option
                v-for="item in licensePlateNumList"
                :key="item.id"
                :value="item.id"
              >{{ item.license_plate_num }}
              </Option>
            </Select>
          </FormItem>
          </Col>
          <Col span="12">
          <FormItem label="报废时间" prop="scrap_time">
            <DatePicker
              v-model="form.scrap_time"
              :editable="false"
              placeholder="选择时间"
              type="date"
              @on-change="form.scrap_time = $event"
            ></DatePicker>
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <FormItem label="备注" prop="note">
            <Input
              v-model="form.note"
              :rows="4"
              placeholder=""
              type="textarea"
            ></Input>
          </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="text" @click="busScrapHandleCancel">取消</Button>
        <Button
          :loading="submitLoading"
          style="margin-left: 8px"
          type="primary"
          @click="submitF('form')"
        >保存
        </Button>
      </div>
    </Modal>
  </Card>
</template>
<script>
import {busScrapList, destroy, idLicensePlateNumList, store, update,} from '../../api/busScrap'

export default {
  data() {
    return {
      total: 0,
      selectCount: 0, // 多选计数
      selectList: [], // 多选数据
      searchForm: {
        license_plate_num: '',
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
      },
      loading: false,
      submitLoading: false,
      modal: false,
      form: {
        id: 0,
        bus_id: 0,
        scrap_time: '',
        note: '',
        license_plate_num: '',
      },
      formValidate: {
        // license_plate_num: [{ required: true, message: '请选择车辆', trigger: 'change' }],
        // scrap_time: [{
        //     type: 'string',
        //     required: true,
        //     message: '请选择报废时间',
        //     trigger: 'change'
        //   }]
      },
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left',
        },
        {
          type: 'index',
          width: 60,
          align: 'center',
          fixed: 'left',
        },
        {
          title: '车牌号',
          key: 'license_plate_num',
          width: 90,
          fixed: 'left',
          align: 'center',
        },
        {
          title: '报废时间',
          key: 'scrap_time',
          width: 100,
          align: 'center',
        },
        {
          title: '车辆类型',
          key: 'type',
          width: 90,
          align: 'center',
        },
        {
          title: '车辆品牌',
          key: 'brand',
          width: 90,
          align: 'center',
        },
        {
          title: '发动机号',
          key: 'engine_num',
          width: 140,
          align: 'center',
        },
        {
          title: '车架号',
          key: 'frame_nun',
          width: 175,
          align: 'center',
        },
        {
          title: '录入员',
          key: 'name',
          width: 100,
          align: 'center',
        },
        {
          title: '备注信息',
          key: 'note',
          width: 200,
          align: 'center',
        },
        {
          title: '创建时间',
          key: 'created_at',
          width: 170,
          align: 'center',
        },
        {
          title: '操作',
          slot: 'action',
          width: 170,
          fixed: 'right',
          align: 'center',
        },
      ],
      data: [],
      licensePlateNumList: [],
      model_type: 0,
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    changePage(v) {
      this.searchForm.pageNumber = v
      this.getBusScrapList()
      this.clearSelectAll()
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false)
    },
    busScrapHandleCancel() {
      this.modal = false
    },
    getIdLicensePlateNumList() {
      this.loading = true
      idLicensePlateNumList().then((res) => {
        this.loading = false
        // console.log(res);
        if (res.data) {
          this.licensePlateNumList = res.data
        }
      })
    },
    getBusScrapList() {
      const id = this.$route.params.idl
      const param_type = this.$route.params.param_type
      if (param_type == 'edit') {
        busScrapList(this.searchForm).then((res) => {
          if (res.data) {
            this.data = res.data.personnel
            this.total = res.data.count
          }
        })
      } else {
        this.loading = true
        this.clearSelectAll()
        busScrapList(this.searchForm).then((res) => {
          // console.log(res);
          this.loading = false
          if (res.data) {
            this.data = res.data.personnel
            this.total = res.data.count
          }
        })
      }
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      // 重新加载数据
      this.getBusScrapList()
    },
    handleSearch() {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getBusScrapList()
    },
    init() {
      this.getBusScrapList()
      this.getIdLicensePlateNumList()
    },
    remove(row) {
      this.$Modal.confirm({
        title: '确认删除',
        loading: true,
        content: '您确认要删除此条数据吗？',
        onOk: () => {
          const ids = row.id
          // 批量删除
          destroy(ids).then((res) => {
            this.$Modal.remove()
            if (res.data === true) {
              this.$Message.success(res.message)
              this.getBusScrapList()
              this.cancel()
            } else {
              this.$Message.error(res.message)
            }
          })
        },
      })
    },
    delAll() {
      if (this.selectCount <= 0) {
        this.$Message.warning('您还未选择要删除的数据')
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        loading: true,
        content: '您确认要删除所选的 ' + this.selectCount + ' 条数据？',
        onOk: () => {
          let ids = ''
          this.selectList.forEach(function (e) {
            ids += e.id + ','
          })
          ids = ids.substring(0, ids.length - 1)
          // 批量删除
          destroy(ids).then((res) => {
            this.$Modal.remove()
            if (res.data === true) {
              this.$Message.success(res.message)
              this.getBusScrapList()
              this.cancel()
            } else {
              this.$Message.error(res.message)
            }
          })
        },
      })
    },
    showSelect(e) {
      this.selectList = e
      this.selectCount = e.length
    },
    toAdd() {
      this.model_type = 0
      this.$refs.form.resetFields()
      delete this.form.id
      this.modal = true
    },
    toEdit(row) {
      // console.log(row);
      this.model_type = 1
      this.form.id = row.id
      this.form.license_plate_num = row.license_plate_num
      this.form.bus_id = row.bus_id
      this.form.scrap_time = row.scrap_time
      this.form.note = row.note
      this.modal = true
    },
    submitF() {
      if (this.model_type == 0) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.submitLoading = true
            store(this.form).then((res) => {
              this.submitLoading = false
              if (res.data) {
                this.modal = false
                this.$Message.success(res.message)
                this.getBusScrapList()
                this.cancel()
              } else {
                this.$Message.error(res.message)
              }
            })
          }
        })
      }
      if (this.model_type == 1) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.submitLoading = true
            update(this.form, this.form.id).then((res) => {
              this.submitLoading = false
              if (res.data) {
                this.modal = false
                this.$Message.success(res.message)
                this.getBusScrapList()
                this.cancel()
              } else {
                this.$Message.error(res.message)
              }
            })
          }
        })
      }
    },
    cancel() {
      this.$refs.form.resetFields()
    },
  },
}
</script>
